<template>
	<view class="content">
		<!-- 导航栏过滤 -->
		<view class="navbar" :style="{position:headerPosition,top:headerTop}">
			<view class="nav-item" :class="{current: categoryList.filterIndex === 0}" @click="tabClick(0)">
				综合排序
			</view>
			<view class="nav-item" :class="{current: categoryList.filterIndex === 1}" @click="tabClick(1)">
				销量优先
			</view>
			<view class="nav-item" :class="{current: categoryList.filterIndex === 2}" @click="tabClick(2)">
				<text>价格</text>
				<view class="p-box">
					<text :class="{active: categoryList.priceOrder === 1 && categoryList.filterIndex === 2}" class="yticon icon-shang"></text>
					<text :class="{active: categoryList.priceOrder === 2 && categoryList.filterIndex === 2}" class="yticon icon-shang xia"></text>
				</view>
			</view>
			<image src="../../static/images/菜单.png" class="cate-item" mode="" @click="toggleCateMask('show')"></image>
			<!-- <text class="cate-item icon-fenlei1"></text> -->
		</view>

		<!-- 商品列表展示 -->
		<view class="goods-list">
			<view v-for="(item, index) in categoryList.goodsList" :key="index" class="goods-item"
				@click="navToDetailPage(item)">
				<view class="image-wrapper">
					<!-- aspectFill保持纵横比缩放图片 -->
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.title}}</text>
				<view class="price-box">
					<text class="price">{{item.price}}</text>
					<text>已售 {{item.sales}}</text>
				</view>
			</view>
		</view>

		<!-- 分类列表 -->
		<view class="cate-mask"
			:class="categoryList.cateMaskState===0 ? 'none' : categoryList.cateMaskState===1 ? 'show' : ''"
			@click="toggleCateMask">
			<!-- @click.stop（阻止事件冒泡） @click.prevent（阻止事件的默认行为） @touchmove手指触摸元素后移动 -->
			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in categoryList.cateList" :key="item.id">
						<view class="cate-item twoTile">{{item.name}}</view>
						<view v-for="tItem in item.child" :key="tItem.id" class="cate-item"
							:class="{active: tItem.id==categoryList.cateId}" @click="changeCate(tItem)">
							{{tItem.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
	<!-- 加载更多 loading状态 -->
	<uni-load-more :status="categoryList.loadingType"></uni-load-more>
</template>

<script setup>
	import datas from "@/Json.js";
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
	} from "@dcloudio/uni-app";
	const categoryList = ref({
		cateMaskState: 0, //分类面板展开状态
		headerPosition: "fixed",
		headerTop: "0px",

		loadingType: 'more', //加载更多状态
		filterIndex: 0, //过滤器
		cateId: 0, //已选三级分类id
		priceOrder: 0, //1 价格从低到高 2价格从高到低
		cateList: [],
		goodsList: [] //商品
		
	})
	// 接收跳转页面传递的参数
	onLoad((options) => {
		console.log(options);
		categoryList.value.cateId = options.tid;
		loadCateList(options.fid, options.sid); //加载一级>二级
		loadData();
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		loadData('refresh');
	})
	
	//加载更多
	onReachBottom(() => {
		loadData();
	})
	
	//加载分类
	async function loadCateList(fid, sid) {
		let list = datas.cateList;
		let cateList = list.filter(item => item.pid == fid); //过滤二级
		cateList.forEach(item => {
			let tempList = list.filter(val => val.pid == item.id); //过滤三级
			item.child = tempList; //二三级级联
		})
		categoryList.value.cateList = cateList;
	}
	//加载商品 ，带下拉刷新和上滑加载
	async function loadData(type = 'add', loading) {
		//没有更多直接返回
		if (type === 'add') {
			if (categoryList.value.loadingType === 'noMore') { //没有更多数据
				return;
			}
			categoryList.value.loadingType = 'loading'; //加载中
		} else {
			categoryList.value.loadingType = 'more'; //加载前
		}
		
		// 模拟数据延时
		await new Promise((resolve, reject) => {
			setTimeout(() => {
				resolve();
			}, 1000);
		})
		
		// 获取商品数据
		let goodsList = datas.goodsList;
		
		
		if (type === 'refresh') {
			// 重置数组数据
			categoryList.value.goodsList = [];
		}
		//筛选，测试数据直接前端筛选了

		if (categoryList.value.filterIndex === 1) {
			//sort((a,b)=> a-b)排序，从小到大排
			goodsList.sort((a, b) => b.sales - a.sales) //出售数量从大到小
		}
		if (categoryList.value.filterIndex === 2) {
			goodsList.sort((a, b) => {
				if (categoryList.value.priceOrder == 1) {
					return a.price - b.price;
				}
				return b.price - a.price;
			})
		}
		categoryList.value.goodsList = categoryList.value.goodsList.concat(goodsList);

		//判断是否还有下一页，有是more  没有是no-more(测试数据判断大于20就没有了)
		categoryList.value.loadingType = categoryList.value.goodsList.length > 20 ? 'noMore' : 'more';
		if (type === 'refresh') {
			if (loading == 1) {
				//隐藏 loading 提示框
				uni.hideLoading();
			} else {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			}
		}
	}

	//筛选点击
	function tabClick(index) {
		if (categoryList.value.filterIndex === index && index !== 2) {
			return;
		}
		categoryList.value.filterIndex = index;
		if (index === 2) {
			categoryList.value.priceOrder = categoryList.value.priceOrder === 1 ? 2 : 1;
		} else {
			categoryList.value.priceOrder = 0; // 重置回归默认状态
		}
		uni.pageScrollTo({ // duration滚动动画时长
			scrollTop: 0,
			duration: 300
		})
		uni.showLoading({
			title: '正在加载中...'
		})
		loadData('refresh', 1);
	}
	//显示分类面板
	function toggleCateMask(type) {
		console.log("type", type);
		let timer = type === 'show' ? 10 : 300; // 过渡时间
		let state = type === 'show' ? 1 : 0;
		categoryList.value.cateMaskState = 2;
		setTimeout(() => {
			categoryList.value.cateMaskState = state;
		}, timer)
	}

	//分类点击
	function changeCate(item) {
		categoryList.value.cateId = item.id;
		toggleCateMask();
		uni.pageScrollTo({
			duration: 300,
			scrollTop: 0
		})
		loadData('refresh', 1);
		uni.showLoading({
			title: '正在加载中...'
		})
	}

	// 页面跳转到详情页
	function navToDetailPage(item) {
		//测试数据没有写id，用模拟数据代替
		let id = 1;
		uni.navigateTo({
			url: `/pages/product/product?id=${id}`
		})
	}

	// 默认事件
	function stopPrevent() {
		return;
	}
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
	}

	.content {
		padding-top: 96rpx;
	}

	// 顶部导航栏样式
	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top); // 导航滚动吸顶效果
		display: flex;
		width: 100%;
		height: 80rpx;
		background: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120rpx;
					height: 0;
					border-bottom: 4rpx solid $base-color;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 14rpx;
				line-height: 1;
				margin-left: 4rpx;
				font-size: 26rpx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}

			.xia {
				// 上标签倒置
				transform: scaleY(-1);
			}
		}

		// 分类list按钮
		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50%;
			width: 40rpx;
			position: relative;
			font-size: 44rpx;
			top: 23rpx;
			right: 15rpx;

			// &:after {
			// 	content: '\e609';
			// 	position: absolute;
			// 	left: 0;
			// 	top: 50%;
			// 	transform: translateY(-50%);
			// 	border-left: 1px solid #ddd;
			// 	width: 0;
			// 	height: 36rpx;
			// }
		}
	}

	// 商品列表
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;
		background: #fff;

		.goods-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40rpx;

			&:nth-child(2n+1) {
				margin-right: auto;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330rpx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		//商品标题样式
		.title {
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80rpx;
		}

		// 价格盒子样式
		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10rpx;
			font-size: 24rpx;
			color: $font-color-light;
		}

		// 价格
		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;

			&:before {
				content: '￥';
				font-size: 26rpx;
			}
		}
	}

	// 分类展示栏样式
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		//过渡
		.cate-content {
			width: 630rpx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%); //x轴过渡
			transition: .3s;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	// 级联样式
	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		//二级样式
		.cate-item {
			display: flex;
			align-items: center;
			height: 90rpx;
			padding-left: 30rpx;
			font-size: 28rpx;
			color: #555;
			position: relative;
		}

		.twoTile {
			height: 64rpx;
			color: #303133;
			font-size: 30rpx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}
</style>